<template>
	<view class="smart-page">
		<view class="smart-page-head">
			<view class="smart-page-head-title">input输入控件</view>
		</view>
		<view>
			<view>可自动获取焦点</view>
			<view><input class="smart-input" focus="true" placeholder="请输入手机号"></view>
		</view>
		
		<view>
			<view>右下角搜索显示</view>
			<view><input class="smart-input" confirm-type="search" placeholder="输入要搜索的内容"></view>
		</view>
		
		<view>
			<view>控制最大输入长度</view>
			<view><input class="smart-input" maxlength="5" confirm-type="search" placeholder="请输入内容"></view>
		</view>
		<view>
			<view>密码输入</view>
			<view><input class="smart-input" password="true" confirm-type="search" placeholder="请输入内容"></view>
		</view>
		<view>
			<view>可查看密码</view>
			<view><input class="smart-input" password="showPassword" placeholder="请输入密码">
			<image class="eye" src="../../../static/1.png" @click="changePassword()"></image>
			</view>
		</view>
		
		<view>
			<view>同步获取</view>
			<view><input class="smart-input" @input="onkeyInput"></view>
			<view><text>{{inputValue}}</text></view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      showPassword: true,
      inputValue: ''
    }
  },
  methods: {
    /*显示隐藏密码*/
    changePassword(){
      console.log('点击......');
      this.showPassword=!this.showPassword;
    },
    /*输入事件*/
    onKeyInput(event){
      console.log(event.detail.value);
      this.inputValue=event.detail.value;
    }
  }
}
</script>

<style>
.eye{
	width: 74upx;
	height: 74upx;
}
.wrapper{
	display: flex;
}
</style>
